<template>
	<div>
		<navHeader :title="$t('l_mibaowenti')"></navHeader>

		<div class="con" v-if="step == 0">
			<div class="text">{{$t('l_yanzhengtixianmima')}}</div>
			<div class="Ou1aviPriFX421w97dGA">
				<div>{{$t('l_tixianmima')}}</div>
				<span class="R1tVtJPfBJA944lSRyyP" v-if="mask" @click="mask = !mask">
					<i class="M2AXg2u2tA9h8un7RCbH"
						style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor" aria-hidden="true"
							focusable="false">
							<use xlink:href="/icons/icon.svg#comm_icon_hide--sprite"></use>
						</svg>
					</i>
				</span>
				<span class="R1tVtJPfBJA944lSRyyP" v-if="!mask" @click="mask = !mask">
					<i class="MOFLcj7nVRZHKLivuWpP"
						style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor" aria-hidden="true"
							focusable="false">
							<use xlink:href="/icons/icon.svg#comm_icon_show--sprite"></use>
						</svg>
					</i>
				</span>
			</div>
			<!-- 密码输入框 -->
			<van-password-input :value="value" :mask="mask" :info="$t('l_mimaliuwei')" :focused="showKeyboard"
				@focus="showKeyboard = true" />
			<!-- 数字键盘 -->
			<van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
			<div class="more" @click="zzc = true">{{$t('l_qitayanzheng')}}</div>
			<div class="orkXHvtNM5R_5twq6l5I" @click="step = 1">
				<div class="baocun">{{$t('l_xiayibu')}}</div>
			</div>
		</div>
		<div class="zzc" v-show="zzc">
			<div class="zzcbox">
				<div class="zzccon">
					<div class="zzctext">{{$t('l_qitayanzheng')}}</div>
					<div class="zzccon1">
						<div class="zzccon1box">
							<i class="anticon">
								<i aria-hidden="true" focusable="false"></i>
							</i>
							<span>{{$t('l_yanzhengtixianmima')}}</span>
						</div>
					</div>
					<div class="zzctext2">{{$t('l_fangfabukeyong')}}<span>{{$t('l_lianxikefu')}}</span></div>
					<img @click="zzc = false" class="closeIcon"
						src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
				</div>
			</div>
		</div>
		<div class="con" v-if="step == 1">
			<div class="text1">{{$t('l_shezhimibao')}}</div>
			<div class="item1 item2">
				<div class="left2">
					<i class="anticon1" style="margin-top: -4px;">
						<i style="display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 13.792 23" width="1em" height="1em" fill="currentColor" aria-hidden="true"
								focusable="false">
								<use xlink:href="/icons/icon.svg#icon_dl_mb--sprite"></use>
							</svg>
						</i>
					</i>
				</div>
				<el-select v-model="mp" popper-class="dropdown" :popper-append-to-body="false">
					<el-option v-for="item in selectlist" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				</el-select>
			</div>
			<div class="item1 item2">
				<div class="left2">
					<i class="anticon1" style="margin-top: -4px;">
						<i style="display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 13.792 23" width="1em" height="1em" fill="currentColor" aria-hidden="true"
								focusable="false">
								<use xlink:href="/icons/icon.svg#icon_dl_yz--sprite"></use>
							</svg>
						</i>
					</i>
				</div>
				<el-input v-model="input" :placeholder="$t('l_shurumobaowentidaan')" />
			</div>
			<div class="item1 item2">
				<div class="left2">
					<i class="anticon1" style="margin-top: -4px;">
						<i style="display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 13.792 23" width="1em" height="1em" fill="currentColor" aria-hidden="true"
								focusable="false">
								<use xlink:href="/icons/icon.svg#icon_dl_yz--sprite"></use>
							</svg>
						</i>
					</i>
				</div>
				<el-input v-model="input1" :placeholder="$t('l_zaicishurumobaowentidaan')" />
			</div>
			<div class="orkXHvtNM5R_5twq6l5I" @click="step = 1">
				<div class="baocun">{{$t('l_queding')}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	export default {
		components: {
			navHeader
		},
		data() {
			return {
				value: '',
				mask: true,
				showKeyboard: false,

				zzc: false,
				step: 0,

				mp: '0',
				selectlist: [{
						value: '0',
						label: this.$t('l_nibaba'),
					},
					{
						value: '1',
						label: this.$t('l_nimama'),
					},
					{
						value: '2',
						label: this.$t('l_nishoujihao'),
					},
					{
						value: '3',
						label: this.$t('l_nilaopo'),
					},
					{
						value: '4',
						label: this.$t('l_nilaopo1'),
					},
				],
				input: '',
				input1: ''
			}
		},
		created() {
			this.mp = this.selectlist[0].value
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.con {
		width: 100%;
		padding: 0.4rem 0.2rem 0.2rem;
	}

	.text {
		font-size: .24rem;
		color: #ffffff;
		font-weight: 700;
		max-width: 2.6rem;
		text-align: left;
	}

	.Ou1aviPriFX421w97dGA {
		width: 100%;
		color: #ffffff;
		font-size: .22rem;
		height: 0.32rem;
		margin-bottom: 0.15rem;
		margin-top: 0.3rem;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.R1tVtJPfBJA944lSRyyP {
		font-size: .36rem;
	}

	.M2AXg2u2tA9h8un7RCbH {
		color: var(--theme-color-line);
	}

	.MOFLcj7nVRZHKLivuWpP {
		color: var(--theme-primary-color);
	}

	/deep/ .van-password-input {
		margin: 0;
	}

	/deep/ .van-password-input__security li {
		background-color: var(--theme-top-nav-bg);;
		color: #fff;
	}

	/deep/ .van-password-input__security i {
		background-color: #fff;
	}

	/deep/ .van-password-input__info {
		margin-top: 0.1rem;
		color: #ea4e3d;
		font-size: .18rem;
		height: 0.4rem;
		line-height: 1;
		margin-bottom: -0.4rem;
		text-align: left;
	}

	.more {
		width: 100%;
		text-align: right;
		font-size: .22rem;
		color: var(--theme-primary-color);
		margin-top: 0.3rem;
	}

	.orkXHvtNM5R_5twq6l5I {
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		box-shadow: 0 -0.03rem 0.1rem 0 rgb(0 0 0 / 10%);
		display: flex;
		height: 1.3rem;
		justify-content: space-between;
		padding: 0 0.2rem;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.baocun {
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: .7rem;
		text-align: center;
		width: 100%;
		border-radius: 0.14rem;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
	}

	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.zzcbox {
		width: 6rem;
		max-width: calc(100vw - 16px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
	}

	.zzccon {
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line);
		border-radius: 0.2rem;
		position: relative;
		padding: 0.2rem 0.3rem 0.3rem !important;
	}

	.zzctext {
		font-weight: 700;
		color: #ffffff;
		font-size: .3rem !important;
		line-height: 1.4;
		text-align: center;
	}

	.zzccon1 {
		margin-top: 0.4rem;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.zzccon1box {
		border-radius: 0.14rem;
		height: 0.7rem;
		padding: 0.12rem 0.05rem 0.12rem 0.2rem;
		width: 2.6rem;
		align-items: center;
		border: 0.01rem solid var(--theme-color-line);
		display: flex;
		justify-content: space-between;
	}

	.anticon {
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		color: inherit;
		display: inline-block;
		font-style: normal;
		line-height: 0;
		text-align: center;
		text-transform: none;
		vertical-align: -0.125em;
	}

	.anticon i {
		display: inline-block;
		position: relative;
		width: 0.46rem;
		height: 0.46rem;
		background-image: url('../../assets/images/yh/img.png');
		background-position: 0rem -2.254rem;
		background-size: 4.67667rem 4.416rem;
	}

	.zzccon1box span {
		font-size: .22rem;
		width: 1.84rem;
		color: var(--theme-text-color);
		line-height: 1.2;
		text-align: center;
	}

	.zzctext2 {
		color: var(--theme-alt-neutral-2);
		margin-top: 0.4rem;
		font-size: .22rem;
		text-align: center;
	}

	.zzctext2 span {
		color: var(--theme-primary-color);
	}

	.closeIcon {
		align-items: center;
		background: none;
		border-radius: 50%;
		bottom: -0.9rem;
		display: flex;
		height: 0.6rem;
		justify-content: center;
		margin-right: -0.3rem;
		position: absolute;
		right: 50%;
		top: auto;
		width: 0.6rem;
	}

	.closeIcon img {
		height: 100%;
		width: 100%;
	}

	.text1 {
		font-size: .24rem;
		margin-bottom: 0.4rem;
		margin-top: 0;
		color: #ffffff;
		font-weight: 700;
	}

	.item1 {
		line-height: 1.5;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-color: #293548 !important;
		border: 1px solid;
		border-radius: 0.14rem;
		height: 0.7rem;
		margin-bottom: 0.3rem;
	}

	.anticon1 {
		height: 0.25rem;
		width: 0.25rem;
		color: var(--theme-alt-neutral-2);
		font-size: 12px;
	}

	/deep/ .el-input__inner {
		height: 0.5rem !important;
		border: 0;
		padding: 0 !important;
		color: #55657e !important;
	}

	.el-input {
		flex: 1;
		border-left: 1px solid var(--theme-color-line);
		padding-left: .2rem;
	}

	.left2 {
		width: 0.6rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left2 svg {
		font-size: 18px;
	}

	.item2 .el-input {
		border-left: 0;
		padding-left: 0;
	}

	.item2 span {
		color: var(--theme-alt-neutral-2);
		font-size: .22rem;
		max-width: 1.8rem;
		margin-right: .2rem;
	}

	.el-select {
		flex: 1;
	}

	/deep/ .el-input__inner {
		height: 0.5rem !important;
		border: 0;
		padding: 0 !important;
		color: #55657e !important;
	}

	/deep/.el-select .dropdown {
		background-color: var(--theme-top-nav-bg) !important;
		border-color: #293548 !important;
		color: #293548 !important;
	}

	/deep/.el-select .el-select-dropdown__item {
		color: #354358 !important;
	}

	/deep/.el-select .popper__arrow {
		border-bottom-color: #293548 !important;
	}

	/deep/.el-select .el-popper .popper__arrow::after {
		border-bottom-color: #293548 !important;
	}

	/deep/.el-select .el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: transparent;
		color: #005dfe !important;
	}
</style>